<template>
  <view class="index-page">
    <scale-screen
      width="1920"
      height="1080"
      :delay="500"
      :fullScreen="false"
      :boxStyle="{
        background: '#03050C',
        overflow: isScale ? 'hidden' : 'auto',
      }"
      :autoScale="isScale"
    >
      <view class="content_wrap">
        <Headers />
        <view class="index-box">
          <view class="contetn_left">
            <ItemWrap class="contetn_left-top contetn_lr-item" title="设备总览">
              <LeftTop />
            </ItemWrap>
            <ItemWrap class="contetn_left-center contetn_lr-item" title="用户总览">
              <LeftCenter />
            </ItemWrap>
            <ItemWrap
              class="contetn_left-bottom contetn_lr-item"
              title="设备提醒"
              style="padding: 0 10px 16px 10px"
            >
              <LeftBottom />
            </ItemWrap>
          </view>
          <view class="contetn_center">
            <CenterMap class="contetn_center_top" title="数据分布图" />
            <ItemWrap class="contetn_center-bottom" title="安装计划">
              <CenterBottom />
            </ItemWrap>
          </view>
          <view class="contetn_right">
            <ItemWrap class="contetn_left-bottom contetn_lr-item" title="报警次数">
              <RightTop />
            </ItemWrap>
            <ItemWrap
              class="contetn_left-bottom contetn_lr-item"
              title="报警排名(TOP8)"
              style="padding: 0 10px 16px 10px"
            >
              <RightCenter />
            </ItemWrap>
            <ItemWrap class="contetn_left-bottom contetn_lr-item" title="数据统计图">
              <RightBottom />
            </ItemWrap>
          </view>
        </view>
      </view>
    </scale-screen>
    <Setting />
  </view>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import { useSettingStore } from '@/stores/index'
import ScaleScreen from '@/components/scale-screen/scale-screen.vue'
import ItemWrap from '@/components/item-wrap/item-wrap.vue'
import Headers from './components/header.vue'
import LeftTop from './components/left-top.vue'
import LeftCenter from './components/left-center.vue'
import LeftBottom from './components/left-bottom.vue'
import CenterMap from './components/center-map.vue'
import CenterBottom from './components/center-bottom.vue'
import RightTop from './components/right-top.vue'
import RightCenter from './components/right-center.vue'
import RightBottom from './components/right-bottom.vue'
import Setting from './components/setting.vue'

const settingStore = useSettingStore()
const { isScale } = storeToRefs(settingStore)
</script>

<style scoped lang="scss">
.index-page {
  width: 100%;
  height: 100vh;
}

.content_wrap {
  width: 100%;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
  background-image: url('/static/img/pageBg.png');
  background-size: cover;
  background-position: center center;
}

.index-box {
  width: 100%;
  display: flex;
  min-height: calc(100% - 64px);
  justify-content: space-between;
}

.contetn_left,
.contetn_right {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  position: relative;
  width: 540px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.contetn_center {
  flex: 1;
  margin: 0 54px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;

  .contetn_center-bottom {
    height: 315px;
  }
}

.contetn_lr-item {
  height: 310px;
}
</style>
